import React from 'react';
import { Link, useLocation } from 'react-router-dom';
import './Breadcrumb.css';

const Breadcrumb = ({ customPaths }) => {
  const location = useLocation();
  const pathnames = location.pathname.split('/').filter(x => x);

  // 如果提供了自定义路径，使用它们；否则基于URL生成
  const paths = customPaths || pathnames;

  // 为常见路径提供友好名称
  const getPathName = (path) => {
    const pathMap = {
      'portfolio': '作品集',
      'blog': '博客',
      'about': '关于',
      'contact': '联系'
    };
    
    return pathMap[path] || path;
  };

  return (
    <div className="breadcrumb">
      <div className="container">
        <ul className="breadcrumb-list">
          <li className="breadcrumb-item">
            <Link to="/">首页</Link>
          </li>
          {paths.map((path, index) => {
            // 构建当前路径的完整URL
            const url = `/${paths.slice(0, index + 1).join('/')}`;
            const isLast = index === paths.length - 1;
            
            return (
              <li key={index} className="breadcrumb-item">
                {isLast ? (
                  <span className="breadcrumb-active">{getPathName(path)}</span>
                ) : (
                  <Link to={url}>{getPathName(path)}</Link>
                )}
              </li>
            );
          })}
        </ul>
      </div>
    </div>
  );
};

export default Breadcrumb;
